import * as Vue from "vue";

export default function () {
  const state = Vue.reactive({
    x: 0,
    y: 0,
  });

  function handleUpdate(e: MouseEvent) {
    state.x = e.pageX;
    state.y = e.pageY;
  }

  Vue.onMounted(function () {
    document.addEventListener("mousemove", handleUpdate);
  });

  Vue.onUnmounted(function () {
    document.removeEventListener("mousemove", handleUpdate);
  });

  return Object.assign(state, {
    renderTest: function () {
      return (
        <h1>
          x：{state.x} y：{state.y}
        </h1>
      );
    },
  });
}
